<template>
  <div>
    <el-form
      label-width="240px"
    >
      <el-form-item :label="$t('appId')">
        <el-input v-model="companyConfigWxGzh.appId"/>
      </el-form-item>
      <el-form-item :label="$t('appSecret')">
        <el-input v-model="companyConfigWxGzh.appSecret"/>
      </el-form-item>
      <el-form-item :label="$t('gzh')+$t('msg')+$t('click')+$t('url')">
        <el-input v-model="companyConfigWxGzh.clickUrl"/>
      </el-form-item>
      <el-form-item :label="$t('save')">
        <el-button type="warning" style="margin-bottom: 20px" @click="getGzhToken">{{
            $t('gzh') + $t('token')
          }}
        </el-button>
        <el-button type="primary" @click="updateCompanyConfigWxGzh">{{ $t('confirm') }}</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="templateMsgList"
      style="width: 100%;"
    >
      <el-table-column :label="$t('img')">
        <template slot-scope="scope">
          <el-button icon="el-icon-question" @click="questionImg(scope.row)"/>
        </template>
      </el-table-column>
      <el-table-column :label="$t('type')">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.type"
          >
            <el-option
              v-for="item in templateMsgTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column :label="$t('code')">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.code"
          />
        </template>
      </el-table-column>
      <el-table-column>
        <template slot="header">
          <el-button type="primary" icon="el-icon-plus" style="float: right" @click="addTemplateMsg"/>
        </template>
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="updateTemplateMsg(scope.row)"
          >{{ $t('save') }}
          </el-button>
          <el-button
            v-if="!scope.row.isAdd"
            type="danger"
            @click="deleteTemplateMsg(scope.row)"
          >{{ $t('delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :visible.sync="dialogTipSrcVisible"
    >
      <el-image :src="tipSrc"/>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogTokenVisible"
    >
      <el-form>
        <el-form-item :label="$t('outTime')">
          <el-input v-model="outTime" :disabled="true"/>
        </el-form-item>
        <el-form-item :label="$t('accessToken')">
          <el-input v-model="accessToken" :disabled="true"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogTokenVisible = false">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import deviceWarnImg from '@/assets/wx/messageTip/deviceWarn.png'
import loginImg from '@/assets/wx/messageTip/loginImg.png'
import lowButteryImg from '@/assets/wx/messageTip/lowButteryImg.png'
import serverWarnImg from '@/assets/wx/messageTip/serverWarnImg.png'
import statusImg from '@/assets/wx/messageTip/statusImg.png'
import bindImg from '@/assets/wx/messageTip/bindImg.png'
import unbindImg from '@/assets/wx/messageTip/unbindImg.png'
import { formatDate, listGzhTemplateType, successNotice } from '@/util/common'
import { getToken } from '@/api/iot/iotThirdPartyTokenApi'
import { getCompanyConfigWxGzh, updateCompanyConfigWxGzh } from '@/api/iot/iotCompanyConfigWxGzhApi'
import {
  deleteCompanyConfigWxGzhTemplateMsg,
  insertCompanyConfigWxGzhTemplateMsg,
  listCompanyConfigWxGzhTemplateMsg,
  updateCompanyConfigWxGzhTemplateMsg
} from '@/api/iot/iotCompanyConfigWxGzhTemplateMsgApi'

export default {
  name: 'IotWxGzh',
  props: {
    companyId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      templateMsgList: [],
      companyConfigWxGzh: {},
      dialogTipSrcVisible: false,
      dialogTokenVisible: false,
      tipSrc: null,
      outTime: null,
      accessToken: null,
      templateMsgTypeList: []
    }
  }, created() {
    this.templateMsgTypeList = listGzhTemplateType(this)
    this.getCompanyConfigWxGzh()
    this.listCompanyConfigWxGzhTemplateMsg()
  }, methods: {
    listCompanyConfigWxGzhTemplateMsg() {
      listCompanyConfigWxGzhTemplateMsg({
        companyId: this.companyId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.templateMsgList = data
        }
      })
    },
    addTemplateMsg() {
      for (let i = 0, j = this.templateMsgList.length; i < j; i++) {
        if (this.templateMsgList[i].isAdd) {
          return
        }
      }
      const item = {
        code: '',
        type: this.templateMsgTypeList[0].value,
        companyId: this.companyId,
        isAdd: true
      }
      this.templateMsgList.push(item)
    },
    updateTemplateMsg(item) {
      if (item.isAdd) {
        insertCompanyConfigWxGzhTemplateMsg(item).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
          }
          this.listCompanyConfigWxGzhTemplateMsg()
        })
      } else {
        updateCompanyConfigWxGzhTemplateMsg(item).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
          }
          this.listCompanyConfigWxGzhTemplateMsg()
        })
      }
    },
    deleteTemplateMsg(item) {
      const that = this
      this.$confirm(this.$t('delete'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteCompanyConfigWxGzhTemplateMsg({
            msgId: item.msgId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
            }
            that.listCompanyConfigWxGzhTemplateMsg()
          })
        })
    },
    getCompanyConfigWxGzh() {
      getCompanyConfigWxGzh({
        companyId: this.companyId
      }).then(res => {
        const { data } = res
        if (data) {
          this.companyConfigWxGzh = data
        }
      })
    },
    updateCompanyConfigWxGzh() {
      updateCompanyConfigWxGzh({
        ...this.companyConfigWxGzh,
        companyId: this.companyId
      }).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
          this.getCompanyConfigWxGzh()
        }
      })
    },
    getGzhToken() {
      getToken({
        'companyId': this.companyId,
        'type': 'gzh'
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.outTime = formatDate(this, data.outTime)
          this.accessToken = data.accessToken
          this.dialogTokenVisible = true
        }
      })
    }, questionImg(item) {
      switch (item.type) {
        case 'deviceBelong':
          this.tipSrc = bindImg
          break
        case 'deviceWarn':
          this.tipSrc = deviceWarnImg
          break
        case 'userLogin':
          this.tipSrc = loginImg
          break
        case 'deviceLowBattery':
          this.tipSrc = lowButteryImg
          break
        case 'serverWarn':
          this.tipSrc = serverWarnImg
          break
        case 'deviceStatus':
          this.tipSrc = statusImg
          break
        case 'deviceUnBelong':
          this.tipSrc = unbindImg
          break
      }
      this.dialogTipSrcVisible = true
    }
  }
}
</script>

